<template>
  <div class="mt--20 purchase-detail">
    <el-tabs type="border-card">
      <el-tab-pane label="调拨信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">调拨信息</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form
            :model="dialogData"
            class="detail-form"
            label-width="120px"
            label-suffix=":"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请门店">
                  <span class="detail-value">{{ dialogData.storeName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="来源门店">
                  <span class="detail-value">{{
                    dialogData.sourceStoreName
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="调拨原因">
                  <span class="detail-value">{{ dialogData.reason }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="备注">
                  <span class="detail-value">{{ dialogData.remark }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否开票">
                  <span class="detail-value">{{
                    dialogData.invoicing ? '是' : '否'
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="detail-section">
          <el-row>调拨进度</el-row>
          <el-divider></el-divider>
          <steps
            v-if="
              dialogData.statusTypes != null &&
              dialogData.statusTypes.length > 0
            "
            :setpsList="dialogData.statusTypes"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="调拨车型">
        <div class="detail-section">
          <el-row>调拨车型</el-row>
          <el-divider></el-divider>
          <data-table
            :has-action="false"
            :value="dialogData.carList"
            :table-column-attributes="tableColumns"
            :width="160"
            :isShowPage="false"
          >
            
          </data-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <print-form /> -->
  </div>
</template>

<script>
// import PrintForm from './PrintForm'
import { Steps } from '@/components/index'
import DataTable from '@/components/DataTable'
export default {
  components: { DataTable, Steps },
  props: {
    dialogData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableColumns: [
        {
          name: '品牌',
          value: 'brandName',
          type: 'text',
        },
        {
          name: '车系',
          value: 'seriesName',
          type: 'text',
        },
        {
          name: '车型',
          value: 'modelName',
          type: 'text',
        },
        {
          name: '车身色',
          value: 'outColor',
          type: 'text',
        },
        {
          name: '内饰色',
          value: 'inColor',
          type: 'text',
        },
        {
          name: '车顶色',
          value: 'roofColor',
          type: 'text',
        },
        // {
        //   name: '增配件及价格明细',
        //   value: 'timeType',
        //   type: 'text',
        // },
        // {
        //   name: '前装及价格明细',
        //   value: 'carModelName',
        //   type: 'text',
        // },
        {
          name: '采购单价(元)',
          value: 'guidePrice',
          type: 'text',
        },
        {
          name: '备注',
          value: 'remark',
          type: 'text',
        },
      ],
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.dialogData =newValue
      },
    },
  },
  methods: {
   
  },
}
</script>

<style lang="scss" scoped>
/deep/ {
  .el-step__icon.is-icon {
    background: inherit;
  }
  .el-icon-success {
    color: #85ce61;
  }
  .el-icon-caret-right {
    color: #f56c6c;
  }
}
</style>
